<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f7f7f7;
        }
        .invoice-container {
            width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .header {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            color: #a0522d;
            font-weight: bold;
        }
        .info-table, .item-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .info-table td, .info-table th, .item-table td, .item-table th {
            border: 1px solid #a0522d;
            padding: 8px;
            text-align: center;
        }
        .info-table th, .item-table th {
            background-color: #f2f2f2;
        }
        .summary {
            text-align: right;
            margin-bottom: 20px;
        }
        .notes {
            border: 1px solid #a0522d;
            padding: 10px;
        }
        .footer {
            text-align: center;
            margin-top: 20px;
        }
        .red {
            color: red;
        }
        #save-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #a0522d;
            color: white;
            border: none;
            cursor: pointer;
        }
        #save-btn:hover {
            background-color: #8a4b2c;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        function saveAsImage() {
            const invoice = document.querySelector('.invoice-container');
            html2canvas(invoice).then(canvas => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL('image/png');
                link.download = 'invoice.png';
                link.click();
            });
        }

        function getQueryParams() {
            const params = new URLSearchParams(window.location.search);
            return {
                title: params.get('title'),
                propertyId: params.get('propertyId'),
                price: params.get('price'),
                area: params.get('area')

            };
        }

        document.addEventListener("DOMContentLoaded", function() {
            const { title, propertyId, price, area } = getQueryParams();
           console.log(price)
            // 从 localStorage 获取购买方姓名
            const buyerName = localStorage.getItem('userName');
            document.getElementById('buyer-name').innerText = buyerName;

            // 将数据绑定到表单
            document.getElementById('property-title').innerText = title;
            // console.log(title)
            // console.log(propertyId);
            document.getElementById('property-id').innerText = propertyId;
            document.getElementById('property-area').innerText = area;
            // console.log(price);
            document.getElementById('property-price').innerText = price;
            // console.log(price);


            // 计算税额和总价
            const taxRate = 0.03;
            const taxAmount = (price * taxRate).toFixed(2);
            const totalPrice = (parseFloat(price) + parseFloat(taxAmount)).toFixed(2);

            document.getElementById('tax-rate').innerText = taxRate;
            document.getElementById('tax-amount').innerText = taxAmount;
            document.getElementById('total-price').innerText = `¥${totalPrice}`;
            document.getElementById('total-price-words').innerText = convertToChinese(totalPrice);
        });

        function convertToChinese(num) {
            const fraction = ['角', '分'];
            const digit = [
                '零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'
            ];
            const unit = [
                ['元', '万', '亿'],
                ['', '拾', '佰', '仟']
            ];
            let head = num < 0 ? '欠' : '';
            num = Math.abs(num);
            let s = '';
            for (let i = 0; i < fraction.length; i++) {
                s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
            }
            s = s || '整';
            num = Math.floor(num);
            for (let i = 0; i < unit[0].length && num > 0; i++) {
                let p = '';
                for (let j = 0; j < unit[1].length && num > 0; j++) {
                    p = digit[num % 10] + unit[1][j] + p;
                    num = Math.floor(num / 10);
                }
                s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
            }
            return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
        }
    </script>
</head>
<body>
<div class="invoice-container">
    <div class="header">
        电子发票（增值税专用发票）
    </div>
    <div>
        发票号码: 49116463144661
    </div>
    <table class="info-table">
        <tr>
            <td>购买方信息</td>
            <td id="buyer-info">姓名: <span id="buyer-name"></span><br>统一社会信用代码/纳税人识别号: 8946461654647777</td>
            <td>销售方信息</td>
            <td>姓名: 王健林<br>统一社会信用代码/纳税人识别号: 12313123141231231</td>
        </tr>
    </table>
    <table class="item-table">
        <tr>
            <th>房产名称</th>
            <th>编号</th>
            <th>面积</th>
            <th>单位</th>
            <th>价格</th>
            <th>单位</th>
            <th>税率/征收率</th>
            <th>税额</th>
        </tr>
        <tr>
            <td id="property-title"></td>
            <td id="property-id"></td>
            <td id="property-area"></td>
            <td>平方米(m²)</td>
            <td id="property-price"></td>
            <td>万元(RMB)</td>
            <td id="tax-rate">0.03</td>
            <td id="tax-amount">3.00</td>
        </tr>
    </table>
    <div class="summary">
        价税合计（大写）<span id="total-price-words">玖佰玖拾玖元及贰玖分</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (小写) <span id="total-price">¥999.99</span>
    </div>
    <div class="notes red">
        备注：我是备注！！！
    </div>
    <div class="footer">
        开票人: 耶稣
    </div>
</div>
<button id="save-btn" onclick="saveAsImage()">保存为图片</button>
</body>
</html>
